<script setup lang="ts">
import { ref, computed } from 'vue'
import { Search, DotsVertical, ChevronLeft, ChevronRight } from '@vicons/tabler'
import { NScrollbar, NIcon, NPopover } from 'naive-ui'
import ChatSessionListItem from './ChatSessionListItem.vue'

const sessions = ref(
  Array(190)
    .fill(null)
    .map((_, i) => ({
      id: i + 1,
      name: `会话${i + 1}`,
      isCollect: Math.random() > 0.5
    }))
)

const searchValue = ref('')
const isPanelExpanded = ref(true)

const filteredSessions = computed(() => {
  if (!searchValue.value.trim()) return sessions.value
  return sessions.value.filter((session) =>
    session.name.toLowerCase().includes(searchValue.value.toLowerCase().trim())
  )
})

const toggleCollect = (sessionId: number) => {
  const session = sessions.value.find((s) => s.id === sessionId)
  if (session) {
    session.isCollect = !session.isCollect
  }
}

const deleteSession = (sessionId: number) => {
  const index = sessions.value.findIndex((s) => s.id === sessionId)
  if (index !== -1) {
    sessions.value.splice(index, 1)
  }
}

const togglePanel = () => {
  isPanelExpanded.value = !isPanelExpanded.value
}
</script>

<template>
  <div
    class="h-full flex flex-col border border-l-solid border-#F0F0F0 rounded-t-2xl relative group transition-all duration-500"
    :class="[isPanelExpanded ? 'w-300px' : 'w-2px']"
  >
    <div class="toggle-button group-hover:opacity-100" @click="togglePanel">
      <div class="w-20px h-15 rounded-l-lg flex items-center justify-center bg-gray-200">
        <n-icon size="20" :component="isPanelExpanded ? ChevronRight : ChevronLeft"></n-icon>
      </div>
    </div>
    <template v-if="isPanelExpanded">
      <div class="w-full h-50px flex flex-col">
        <div class="w-full h-full flex justify-between items-center p-3">
          <div class="title-search-container">
            <span class="title">历史会话</span>
            <div class="search-container">
              <input
                v-model="searchValue"
                type="text"
                placeholder="搜索会话"
                class="search-input"
              />
              <n-icon size="15" :component="Search" class="search-icon"></n-icon>
            </div>
          </div>
          <div class="flex items-center justify-between">
            <div class="flex items-center justify-between">
              <n-popover trigger="click" :show-arrow="false">
                <template #trigger>
                  <div
                    class="flex items-center cursor-pointer p-5px rounded-lg ml-5px hover:bg-gray-200 text-[#787878]"
                  >
                    <n-icon size="15" :component="DotsVertical"></n-icon>
                  </div>
                </template>
                <div class="p-2">
                  <div class="cursor-pointer hover:bg-gray-100 p-1 rounded">选项1</div>
                  <div class="cursor-pointer hover:bg-gray-100 p-1 rounded">选项2</div>
                  <div class="cursor-pointer hover:bg-gray-100 p-1 rounded">选项3</div>
                </div>
              </n-popover>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full h-full flex flex-col flex-1 p-3 pt-0">
        <n-scrollbar class="w-full" style="height: calc(100vh - 110px)">
          <ChatSessionListItem
            v-for="session in filteredSessions"
            :key="session.id"
            :sessionName="session.name"
            :isCollect="session.isCollect"
            @toggleCollect="toggleCollect(session.id)"
            @deleteSession="deleteSession(session.id)"
          ></ChatSessionListItem>
        </n-scrollbar>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.toggle-button {
  position: absolute;
  top: 50%;
  left: -20px;
  transform: translateY(-50%);
  height: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px 0 0 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

.toggle-button:hover {
  opacity: 1;
}

.title-search-container {
  position: relative;
  display: flex;
  align-items: center;

  .title {
    transition: opacity 0.3s ease;
  }

  .search-container {
    width: 30px;
    overflow: hidden;
    transition: all 0.3s ease;
    &:hover {
      .search-icon {
        display: none;
      }
    }

    .search-input {
      width: 100px;
      padding: 5px 30px 5px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 5px;
      font-size: 11px;
      outline: none;
      opacity: 0;
      transition: all 0.3s ease;
      margin-left: 5px;

      &:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
      }
    }

    .search-icon {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      cursor: pointer;
    }

    &:hover,
    &:focus-within {
      width: 120px;

      .search-input {
        opacity: 1;
      }

      & + .title {
        opacity: 0;
      }
    }
  }
}
</style>
